<template>
  <view>
    <!-- 轮播图 -->
    <VoteSwiper :imgList="playerData?.images || []" />
    <!-- 基本信息 -->
    <view class="player-info">
      <view class="player-header">
        <view class="player-name">
          {{ playerData?.tittle }}
          <uni-tag
            :text="`${index}号选手`"
            type="primary"
            size="small"
            :inverted="true"
          />
        </view>
        <view class="player-vote-num">{{ playerData?.num }}票</view>
      </view>
      <view class="player-desc">{{ playerData?.intro }}</view>
    </view>
    <view class="vote-btn">
      <button class="vote-btn-help" open-type="share">助力</button>
      <button class="vote-btn-vote" @tap="votePlayer()">投票</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import VoteSwiper from "@/components/VoteSwiper.vue";
import { useUserStore } from "@/stores";
import { ref } from "vue";
import { votePlayerAPI } from "@/api/player";

defineProps<{
  id: string;
  index: string;
}>();

const userStore = useUserStore();

const playerData = ref(userStore.selectedPlayer);

//投票
const votePlayer = async () => {
  //是否投票某选手提示弹窗
  uni.showModal({
    title: "投票提示",
    content: `是否投票给${playerData.value?.tittle}选手 `,
    success: async function (res) {
      if (res.confirm) {
        await votePlayerAPI(playerData.value?.id as string);
        uni.showToast({
          title: "投票成功",
          icon: "success",
          duration: 1000,
        });
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};
</script>
<style scoped lang="scss">
.player-info {
  margin-top: 20rpx;
  padding: 0 20rpx;
  .player-header {
    display: flex;
    justify-content: space-between;
    .player-name {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
    .player-vote-num {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
    }
  }
  .player-desc {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
}
.vote-btn {
  position: absolute; /* 设置为绝对定位 */
  bottom: 250rpx; /* 距离底部200rpx */
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 20rpx;
  .vote-btn-help {
    width: 300rpx;
    margin: 0;
    border: #2979ff 1px solid;
    color: #2979ff;
    font-size: 28rpx;
    border-radius: 10rpx;
    cursor: pointer;
  }
  .vote-btn-vote {
    width: 300rpx;
    margin: 0;
    background-color: #2979ff;
    color: #fff;
    font-size: 28rpx;
    border-radius: 10rpx;
    cursor: pointer;
  }
}
</style>
